<template>

  <div>
   <el-form :model="skuInfo" label-width="100px">
     
      <el-form-item label="SPU名称"> 
        <span>SPU名称</span>
      </el-form-item>
      
      <el-form-item label="SKU 名称" prop="skuName"> 
        <el-input v-model="skuInfo.skuName"  width="300"></el-input>
      </el-form-item>
      
      <el-form-item label="价格 (元)" prop="price"> 
        <el-input v-model="skuInfo.price"  width="300"></el-input>
      </el-form-item>
      
      <el-form-item label="重量 (千克)" prop="weight"> 
        <el-input v-model="skuInfo.weigth"  width="300"></el-input>
      </el-form-item>
      
      <el-form-item label="规格描述" prop="weight"> 
        <el-input v-model="skuInfo.brief" width="300"></el-input>
      </el-form-item>

        <!-- 平台属性 -->

      <el-form-item label="平台属性">
      
        <el-form inline>
          <el-form-item :label="item.name" label-width="80px" v-for="item in spuAttriList" :key="item.id">
            <el-select  placeholder="请选择" v-model="item.select">
              <el-option :label="cc.value" :value="cc.id" v-for="cc in item.values" :key="cc.id"></el-option>
              
            </el-select>

          </el-form-item>
          
        </el-form> 
      </el-form-item>

       <!-- 销售属性 -->

      <el-form-item label="销售属性">
       <el-form inline>
         <el-form-item :label="item.name" label-width="80px" v-for="item in product" :key="item.id">
           <el-select placeholder="请选择"  v-model="item.select" >
             <el-option v-for="dd in item.children" :key="dd.id" :label="dd.value" :value="dd.value">

             </el-option>

           </el-select>
         </el-form-item>
       </el-form>
      </el-form-item>

      <!-- 图片列表 -->
      <el-form-item label="图片列表 ">
         <el-table  border 
          ref="multipleTable"
          :data="picList"
          tooltip-effect="dark"
          style="width: 95%"
          @selection-change="handleSelectionChange"
          >

            <el-table-column
              align="center"
              type="selection"
              width="80">
            </el-table-column>
            <el-table-column
              label="图片"
              
              >
              <template slot-scope="{row,$index}">
                <img :src="row.url" style="width:100px">
              </template>

            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              show-overflow-tooltip
              >
            </el-table-column>
            <el-table-column
              label="操作"
              width="120"
              align="center"
              >
              <template slot-scope="{row,$index}">
                <el-button v-if="row.default == 1"  size="mini" @click="setDafault(row)">默认图片</el-button>
                <el-button v-else type="primary" size="mini" @click="setDafault(row)">设为默认</el-button>
              </template>
             
              
            </el-table-column>
        </el-table>

      </el-form-item>

      <el-form-item>
        <el-button @click="cancel">返回</el-button>
        <el-button type="primary" @click="save">确认</el-button>
      </el-form-item>
   </el-form>

  </div>
</template>

<script>
export default {
  data(){
    return{
      // spu
      spu:{},
      // sku初始
     skuInfo:{
        spu:'',
      skuName:'',
      price:'',
      weight:'',
      brief:''
     },
     spuAttriList:[],
     picList:[],
     product:[],

     defaultImg:'',
    //  table
    
     multipleSelection: []
   }

    
  },
  props:['skuShow'],
  methods:{
    // 获取请求
   async getCategory(row){
      this.spu = row
      let syncList= []
      let category = this.$api.category.reqCategory3rd(row.category_id)
      // 通过SPU.ID获取图片列表
      let picList = this.$api.sku.reqGoodsPics(row.id)
      // 获取产品规格
      let product = this.$api.sku.reqSpecification()
      syncList.push(category,picList,product)
      
      try{
        let list = await Promise.all(syncList)
        this.spuAttriList = list[0].data
        // list[1].data.forEach(item =>{
        //   item.isDefault = false
        // })
        this.picList = list[1].data
        this.product = list[2].data

      }catch{

      }

    },
    handleSelectionChange(){

    },
    // 图片设为默认
    setDafault(row){
      // 排他
      this.picList.map(item =>{
        item.default = 0
        if(item == row){
          item.default = 1
          this.defaultImg = row
        }

      })
    },

    // 提交
   async save(){
      // 收集数据
      let {skuInfo,defaultImg,spu,spuAttriList} = this
      // 整理选中的属性
      let spuAddAttri=spuAttriList.reduce((pre,cur)=>{
        if(cur.select){
          pre.push(cur.select)
        }
         return pre
      },[])
      let saleList = this.product.reduce((pre,cur)=>{
         if(cur.select){
          pre.push(cur.select)
        }
         return pre
      },[])
      skuInfo.saleList = saleList
      skuInfo.spuAddAttri = spuAddAttri
      skuInfo.defaultImg = defaultImg
      skuInfo.spu = spu
    // 提交判断
    try{
      let result = await this.$api.sku.reqSaveSku(skuInfo)
      if(result.status != 200){
        this.$message.error('保存失败')
        return
      }else{
        // 清空数据
        this.clearData()
        // 提示,关闭窗口
        this.$message.success('保存成功')
        this.$emit('update:skuShow',false)

      }

    }catch{
      this.$message.error('保存失败')
    }
    
    },

    // 清空数据
    clearData(){
       // spu
     this.spu={},
      // sku初始
     this.skuInfo={
      spu:'',
      skuName:'',
      price:'',
      weight:'',
      brief:''
     },
     this.spuAttriList=[],
     this.picList=[],
     this.product=[],
     this.defaultImg=''
    },
    
    // 取消按钮
    cancel(){
      this.$emit('update:skuShow',false)
      this.clearData()
    }
  }
}
</script>


<style>

</style>